<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>熊猫优选--你值得拥有</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
  </head>
  <body>
    <header >
      <div class="search w">
        <div class="logo">
          <img src="./images/logo.png" alt="返回首页" srcset="" />
          <div class="rig">
            <h3>熊猫优选</h3>
            <span>XIONG MAO YOU XUAN</span>
          </div>
        </div>
        <div class="sear">
          <input type="text" placeholder="请输入您要搜索的商品" class="inp" />
          <button>搜索</button>
        </div>
        <div class="right">
          <ul>
            <li>
              <img src="./images/baoyou.png" alt="" />
              <span>全程包邮</span>
            </li>
            <li>
              <img src="./images/tuihuan.png" alt="" />
              <span> 7天退换 </span>
            </li>
            <li>
              <img src="./images/pinzhi.png" alt="" />
              <span>品质保证</span>
            </li>
          </ul>
        </div>
      </div>
       <nav>
        <ul class="w">
          <li class="active uli uli1">首页</li>
          <li class='uli uli2'>9块9包邮</li>
          <li class='uli uli3'>超值大额券</li>
          <li class='uli uli4'>夏季女装上新</li>
        </ul>
      </nav>
    </header>

    <main>
      <div class="car">购物车</div>
      <div class="ol">
        
        </div>

      <div class="banner w">
        <div class="nav">
       
          <ul id='ul'>
            <li data-ids="2, 13">
              <span>女装</span>
              <span>/女鞋</span>
            </li>
            <li data-ids="5, 19">
              <span>男装</span>
              <span>/男鞋</span>
            </li>
            <li  data-ids="3, 15">
              <span>美护</span>
              <span>/个护</span>
            </li>
            <li  data-ids="4, 14">
              <span>箱包</span>
              <span>/配饰</span>
            </li>
            <li  data-ids="10">
              <span>零食王国</span>
            </li>
            <li  data-ids="24 ">
              <span>母婴用品</span>
            </li>
            <li  data-ids="6, 12">
              <span>手机</span>
              <span>/数码</span>
            </li>
            <li  data-ids="16">
              <span>内衣袜子</span>
            </li>
            <li  data-ids="2, 13">
              <span>文娱</span>
              <span>/家居</span>
            </li>
          </ul>
        </div>
        <div class="center">
          <div class="top">
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img
                    src="./images/9XJOAXPAVBYQmBheok7cVkIjuhzECzpU.jpeg"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="./images/ArTLDPzPUTHKnRcQRQ3U7I1fYTV52RMO (1).png"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="./images/blsmJQbkAAKgZ6o0vWEI4KkIvdOIjVHR.png"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="./images/TBEJTL9NhOpnBQVCC5V81b3yXRCrS5C8.png"
                    alt=""
                  />
                </div>
              </div>
              <!-- Add Arrows -->
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
            </div>

            <!-- Swiper JS -->
            <!-- <script src="../package/swiper-bundle.min.js"></script> -->

            <!-- Initialize Swiper -->
            <script src="./libs/swiper/swiper-bundle.min.js"></script>
            <!-- 轮播图 -->
            <script>
              var swiper = new Swiper(".swiper-container", {
                cssMode: true,
                // autoplay: true,
                autoplay: {
                  pauseOnMouseEnter: true,
                },
                navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
                },
                pagination: {
                  el: ".swiper-pagination",
                  clickable: true,
                },
                mousewheel: true,
                keyboard: true,
                loop: true,
              });
            </script>
          </div>
          <div class="bottom">
            <div class="nvzhuang">
              <div class="l">
                <h2>夏季女装上新</h2>
                <p>速来抢购~</p>
                <div class="go">Go</div>
              </div>
              <img src="./images/vsaRLJUT8OSbh1yM9d0nPQk8vptgNbSQ.png" alt="" />
            </div>
            <div class="youhui">
              <div class="r">
                <h2>超值大额券</h2>
                <p>优惠直击底价</p>
                <div class="go">Go</div>
              </div>
              <img src="./images/20181212-235507.png" alt="" />
            </div>
            </div>
          </div>
          <div class="zuo">
            <div class="baoyou">
              
                <h3>9块9包邮</h3>
                <p>保你不吃亏</p>
              
             
            
          </div>
          <div class="app">
              <p>扫码下载APP</br>
              发现更多惊喜</p>
              <div>

              </div>
            </div>
        </div>
        
      </div>
      <div class="jingxuan w">
        <p>小编精选</p>
        <span>每日更新</span>
      </div>

      <div class="rongqi"> </div>
      <div class="btn"> 查看更多</div>
      
    </main>

    <footer>
      <div class="box">
        <div class="box1 w">
           <div class="contain">
             <h2>熊猫优选</h2>
           <p>年轻人网购首选</p>
           <p>购物领券更省钱</p>
           </div>
           <div class="ri">
             <span>|</span>
          <a href="http://www.xiongmaoyouxuan.com/#/downLoad" target="_blank"   >下载APP</a>
           </div>
        </div>
      </div>
    </footer>



    <script type="text/html" id="temp">
    <ul class="w products yangshi">
      {{each products prod}}
    <li class="base-commodity-list-item" data-id="{{prod.id}}"  data-prod='{{prod}}'>
                  <div class="commodity-card">
                    <div class="commodity-container">
                      <img class="commodity-card-img"
                        src="{{prod.image}}">
                    </div>
                    <div class="commodity-card-msg">
                      <div class="commodity-card-title  biaoti">{{prod.title}}</div>
                      <div class="commodity-card-keyword tianmao">
                        <span class="keyword taobao">{{prod.platform === 1 ? "淘宝" : "天猫"
              }}</span>
                        <span class="keyword free-postage you">{{prod.isFreePostage ? "包邮" : ""
              }}</span>
                      </div>
                      <div class="commodity-card-foot jiage">
                        <div class="left">
                          <span class="price">
                            <span class="price-tag">￥</span>
                            <span class="price-strong  yigou">{{prod.price}}</span>
                          </span>
                          <span class="sale-num  mai">{{prod.saleNum}}人已买
                          </span>
                        </div>
                        <span class="coupon-value  quan">
                          {{prod.couponValue}}
                        </span>
                      </div>
                    </div>
                  </div>
                  <p class='add-to-cart'>加入购物车</p>
                </li>
    {{/each}}
    </ul>>
    </script>
    <!-- 导航栏模板 -->
    <script type="text/html" id="temp1">
        <div class="top1">
           
      <h3 data-v-1994baad="">{{products2.category.name}}</h3>
      <ul data-v-1994baad="">
       {{each products2.categories val}}
       <li data-v-1994baad="">
                             {{val.title}} 
                            </li>
                            {{/each}}
                          </ul>
                        </div>
     {{if products3.category}}
        <div class="bottom1">
     <h3 data-v-1994baad="">{{products3.category.name}}</h3>
      <ul data-v-1994baad="">
       {{each products3.categories  val}}
       <li data-v-1994baad="">
                             {{val.title}} 
                            </li>
                            {{/each}}
                          </ul>

                          </div>
     {{/if}}
    </script>
     <script src="./libs/requirejs/require.js" data-main="./js/index"></script>
  </body>
</html>
